<template>
    <div id="map"></div>
</template>

<script setup>
import {app}from '@/main'
import {onMounted}from 'vue'
onMounted(()=>{
  const gaode = new ol.layer.Tile({
    title: '高德地图',
    source: new ol.source.XYZ({
      url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
      wrapX: false,
    }),
  })
  const map=new ol.Map({
    target:'map',
    layers:[gaode],
    view:new ol.View({
      center:[114.30,30.50],
      zoom:8,
      projection:'EPSG:4326'
    })
  })
  app.config.globalProperties.$map=map
})
</script>

<style scoped>
#map{
    width: 100vw;
    height: 100vh;
}
</style>